<template>
  <a
    class="topics-list__item"
    :href="href + encodeURIComponent(encodeURIComponent(topicInfo.id))"
    target="_blank"
  >
    <h3>{{ topicInfo.title }}</h3>
    <span>{{ topicInfo.publish_time }}</span>
  </a>
</template>
<script>
export default {
  name: 'TopicItem',
  props: ['topicInfo', 'href']
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.topics-list__item {
  padding: 10px;
  border-bottom: 1px solid #999;
  display: block;
  color: #000;

  &:hover {
    background: #eee;
  }
  h3 {
    margin: 0;
  }
}
</style>
